﻿<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <div class="post-5511 post type-post status-publish format-standard hentry category-arquitetura-e-navegacao category-descobrindo-o-windows-8 category-windows-8 tag-arquitetura-de-informacao tag-caverna tag-desenvolvimento tag-fernando-martin tag-interface tag-microsoft tag-ui tag-ux" id="post-5511">

        <!--Begin response_loop hook-->


        <div class="postformats">
            <!--begin format icon-->
            <img src="http://fernandomartin.azurewebsites.net/wp-content/themes/response/images/formats/default.png" alt="formats">
        </div>
        <!--end format-icon-->
        <h2 class="posts_title"><a href="http://fernandomartin.azurewebsites.net/?p=5511">Um sistema de navegação simplificado para Windows Store Apps</a></h2>
        <!--begin response_post_byline hook-->

        <div class="meta">
            Published on <a href="http://fernandomartin.azurewebsites.net/?p=5511">19 September, 2012</a>,		by <a href="http://fernandomartin.azurewebsites.net/?author=1" title="Posts by fefigu" rel="author">fefigu</a>
            in <a href="http://fernandomartin.azurewebsites.net/?cat=171" title="View all posts in Arquitetura e Navegação" rel="category">Arquitetura e Navegação</a>, <a href="http://fernandomartin.azurewebsites.net/?cat=71" title="View all posts in Descobrindo o Windows 8" rel="category">Descobrindo o Windows 8</a>, <a href="http://fernandomartin.azurewebsites.net/?cat=281" title="View all posts in Windows 8" rel="category">Windows 8</a>.		
        </div>
        <!--end response_post_byline hook-->

        <div class="entry">
            <p><a href="http://fernandomartin.azurewebsites.net/wp-content/uploads/2012/09/toponovoA.png">
                <img class="aligncenter size-full wp-image-5481" title="toponovoA.png" src="http://fernandomartin.azurewebsites.net/wp-content/uploads/2012/09/toponovoA.png" alt="" width="1000" height="288"></a></p>
            <p>Conhecido como <em>flat, </em>existe um sistema de navegação muito simples e intuitivo que você pode fazer uso. Ele&nbsp; é menos flexível porém mais raso e rápido, o que o torna ideal para Apps que serão utilizadas com pouca imersão.</p>
            <p>Muitos aplicativos&nbsp;para a Windows Store&nbsp;precisam de um padrão simplificado. Este sistema é bastante visto em jogos, navegadores ou aplicativos de criação de documentos, nos quais o usuário navega entre páginas, guias ou modos, todos no mesmo nível hierárquico, diferente do padrão do post anterior.</p>
            <p>Este padrão é melhor quando o cenário principal envolve a troca rápida entre um pequeno número de páginas ou guias.</p>
            <p><a href="http://fernandomartin.azurewebsites.net/wp-content/uploads/2012/09/ccc.png">
                <img class="aligncenter size-full wp-image-5531" title="ccc" src="http://fernandomartin.azurewebsites.net/wp-content/uploads/2012/09/ccc.png" alt="" width="200" height="115"></a></p>
            <p>Basicamente este sistema conta com&nbsp;uma <strong>Barra de navegação</strong> e um <strong>Sistema de Alternância</strong>.</p>
            <p><span id="more-5511"></span></p>
            <p><a href="http://fernandomartin.azurewebsites.net/wp-content/uploads/2012/09/rrr.png">
                <img class="aligncenter size-full wp-image-5541" title="rrr" src="http://fernandomartin.azurewebsites.net/wp-content/uploads/2012/09/rrr.png" alt="" width="214" height="326"></a></p>
            <p>Tanto para sistema hierárquico ou o sistema flat, você precisa dominar a <strong>anatomia da navegação,</strong> isso quer dizer, dominar todos os recursos presentes na plataforma para que você permita estas experiências de&nbsp;navegação em sua interface.</p>
            <p><a href="http://fernandomartin.azurewebsites.net/wp-content/uploads/2012/09/www.png">
                <img class="aligncenter size-full wp-image-5551" title="www" src="http://fernandomartin.azurewebsites.net/wp-content/uploads/2012/09/www.png" alt="" width="520" height="356"></a></p>
            <p>&nbsp;</p>
            <h4>A barra de navegação</h4>
            <p>Na&nbsp;lógica <em>flat</em>, a&nbsp;barra de navegação é usada principalmente para as seções ou páginas de navegação de um aplicativo. Ela também pode ser usada com o padrão hierárquico no lugar do menu do cabeçalho como meio de fornecer controles de navegação globais. A barra de navegação deve aparecer em todas as páginas e todos os níveis do aplicativo para proporcionar aos usuários um modo conveniente de acesso.</p>
            <p>Neste exemplo de aplicativo financeiro, o hub (nível 1) promove seções do aplicativo (Manchetes, Favoritos) ao hub, e os cabeçalhos da seção são vinculados a elas. No nível de seção (nível 2), quando a barra de navegação é chamada com o gesto de passar o dedo pela borda superior ou inferior, o usuário obtém acesso à raiz e todas as outras seções do aplicativo.</p>
            <p><a href="http://fernandomartin.azurewebsites.net/wp-content/uploads/2012/09/qqq2.png">
                <img title="qqq" src="http://fernandomartin.azurewebsites.net/wp-content/uploads/2012/09/qqq3.png" alt="" width="523" height="630"></a></p>
            <p>Os comandos para selecionar outros modos de exibição de calendário estão na barra de aplicativos, acessada pelo gesto de passar o dedo pela borda superior ou inferior. Outros comandos, como criar um novo compromisso, também podem aparecer na barra.</p>
            <p>Falando das barras de aplicativos (ou <em>App bars</em>)<em> , </em>elas são ótimas para lhe ajudar a exibir o conteúdo do modo que o usuário desejar, seja para fazer uma classificação (<em>sort</em>) <em>&nbsp;</em>ou para filtrar dados.</p>
            <p>No exemplo abaixo, estou fazendo um sort por dia, semana ou mês.</p>
            <p><a href="http://fernandomartin.azurewebsites.net/wp-content/uploads/2012/09/qwqw.png">
                <img class="aligncenter size-full wp-image-5631" title="qwqw" src="http://fernandomartin.azurewebsites.net/wp-content/uploads/2012/09/qwqw.png" alt="" width="739" height="439"></a></p>
            <p>Nota: Não se esqueça de manter a consistência da posição dos botões durante a navegação.</p>
            <p>Bom, fizemos um <em>sort</em>, porem se você tivesse 10 tipos diferentes de classificação, como faria?&nbsp;Colocaria 10 botões?</p>
            <p>Se a resposta foi sim, tenho uma dica<strong>.</strong> <strong>Utilize&nbsp;um menu flutuante.</strong></p>
            <p>Na imagem abaixo tenho 10 classificações, mas estão escondidas, dentro de um botão chamado <em>sort</em>. Este mesmo menu flutuante está sendo exibido abaixo, mas nele, utilizei a mesma lógica, só que desta vez para filtrar dados.</p>
            <p><a href="http://fernandomartin.azurewebsites.net/wp-content/uploads/2012/09/eee.png">
                <img class="aligncenter size-full wp-image-5641" title="eee" src="http://fernandomartin.azurewebsites.net/wp-content/uploads/2012/09/eee.png" alt="" width="743" height="442"></a></p>
            <p>Não se preocupe se ainda não encontrou a solução ideal para o uso de <em>app bars </em>do seu projeto. Este mundo de UI pode&nbsp;ser novo&nbsp;para você,&nbsp; mas o mais&nbsp;importante é que você está se preocupando com ele, e consequentemente, fazendo uma App ou Game ainda mais polido
                <img src="http://fernandomartin.azurewebsites.net/wp-includes/images/smilies/icon_wink.gif" alt=";)" class="wp-smiley">
            </p>
            <p>&nbsp;[]`s</p>
            <p>&nbsp;</p>
            <div class="fb-like fb-social-plugin fb_edge_widget_with_comment fb_iframe_widget" data-enabled="true" data-show-faces="true" data-layout="standard" data-width="450" data-action="recommend" data-colorscheme="light" data-font="lucida grande" data-position="bottom" data-show-on-homepage="true" data-href="http://fernandomartin.azurewebsites.net/?p=5511" data-ref="wp" fb-xfbml-state="rendered"><span style="height: 28px; width: 450px;">
                <iframe id="f3b427548" name="ffdd3a9a" scrolling="no" style="border: none; overflow: hidden; height: 28px; width: 450px;" title="Like this content on Facebook." class="fb_ltr" src="http://www.facebook.com/plugins/like.php?api_key=441758012521279&amp;locale=en_US&amp;sdk=joey&amp;ref=wp&amp;channel_url=http%3A%2F%2Fstatic.ak.facebook.com%2Fconnect%2Fxd_arbiter.php%3Fversion%3D14%23cb%3Df30997b588%26origin%3Dhttp%253A%252F%252Ffernandomartin.azurewebsites.net%252Ff2dddafd8%26domain%3Dfernandomartin.azurewebsites.net%26relation%3Dparent.parent&amp;href=http%3A%2F%2Ffernandomartin.azurewebsites.net%2F%3Fp%3D5511&amp;node_type=link&amp;width=450&amp;font=lucida%20grande&amp;layout=standard&amp;colorscheme=light&amp;action=recommend&amp;show_faces=true&amp;extended_social_context=false"></iframe>
            </span></div>
        </div>
        <!--end entry-->

        <!--End response_loop hook-->

        <!--Begin response_link_pages hook-->
        <!--End response_link_pages hook-->

        <!--Begin response_post_edit_link hook-->
        <!--End response_post_edit_link hook-->

        <!--Begin response_post_tags hook-->

        <div class="tags">
            Tags: <a href="http://fernandomartin.azurewebsites.net/?tag=arquitetura-de-informacao" rel="tag">Arquitetura de Informação</a>, <a href="http://fernandomartin.azurewebsites.net/?tag=caverna" rel="tag">Caverna</a>, <a href="http://fernandomartin.azurewebsites.net/?tag=desenvolvimento" rel="tag">Desenvolvimento</a>, <a href="http://fernandomartin.azurewebsites.net/?tag=fernando-martin" rel="tag">Fernando Martin</a>, <a href="http://fernandomartin.azurewebsites.net/?tag=interface" rel="tag">Interface</a>, <a href="http://fernandomartin.azurewebsites.net/?tag=microsoft" rel="tag">Microsoft</a>, <a href="http://fernandomartin.azurewebsites.net/?tag=ui" rel="tag">UI</a>, <a href="http://fernandomartin.azurewebsites.net/?tag=ux" rel="tag">UX</a><br>
        </div>
        <!--end tags-->
        <!--End response_post_tags hook-->

        <!--Begin response_post_bar hook-->

        <div id="comments">
            <a href="http://fernandomartin.azurewebsites.net/?p=5511#respond" title="Comment on Um sistema de navegação simplificado para Windows Store Apps">No Comments</a>.
        </div>
        <!--End response_post_bar hook-->

        <ol>
            <li>Teste 123</li>
            <li>Teste 123</li>
            <li>Teste 123</li>
            <li>Teste 123</li>
            <li>Teste 123</li>
        </ol>
        <br />
        <u>teste</u>
        <br />
        <ul>
            <li>Teste 123</li>
            <li>Teste 123</li>
            <li>Teste 123</li>
            <li>Teste 123</li>
            <li>Teste 123</li>
        </ul>
    </div>
</body>
</html>
